import React from 'react'
import './my.less'
import cookies from 'js-cookie'
import axios from 'axios';
import imgsrc from '../../img/morentouxiang.png'
import { connect } from 'react-redux';
import fun from '../../store/action/index'
class My extends React.Component {
    constructor() {
        super();
        this.state = {
            my_loginCode: 0,//登录状态码    0  未登录
            my_profileType: '未登录',//登录状态信息、用户名或者未登录
            my_member: [//my_member的数据
                { icon: 'icon-iconset0325', title: '我的钱包', id: 1, path: '/myWallet' },
                // { icon: 'icon-jifen', title: '我的积分', id: 2, path: '' },//
                { icon: 'icon-huiyuan-', title: '开通会员', id: 3, path: '/myVip' },//充值
            ],
            my_message: [//my_message的数据
                { icon: 'icon-footprint', title: '我的足迹', id: 4, path: '/myFootmark' },
                { icon: 'icon-huabanfuben', title: '我的消费', id: 5, path: '/myConsumption' },
                // { icon: 'icon-pinglun', title: '我的评论', id: 6, path: '' },
                { icon: 'icon-shoucang11', title: '我的收藏', id: 7, path: '/myCollect' },
                { icon: 'icon-shezhi', title: '我的设置', id: 8, path: '/mySet' },
            ],
            user_data: {},//用户信息
            user_portrait: imgsrc,//头像
            classTitle: '',//class名
        }
    }

    render() {
        let { my_member, my_message, user_portrait, user_data } = this.state;
        // console.log(user_data);
        return (
            <div className="my_box">
                <div className="my_header">
                    <div className="my_profile" onClick={() => { this.click_loginType() }}>
                        <img src={user_portrait}></img>
                    </div>
                    <div className="my_profileType" onClick={() => { this.click_loginType() }}>
                        {this.state.my_profileType}
                        {/* VIP */}
                        {this.state.my_loginCode === 0 ? null :
                            <span className={
                                // this.state.classTitle
                                user_data.user_vipGrade === '0' ? 'iconfont icon-V0' :
                                    `${user_data.user_vipGrade === '1' ? 'iconfont icon-v1' :
                                        user_data.user_vipGrade === '2' ? 'iconfont icon-V' : 'iconfont icon-V1'}`
                            } id="classV">
                            </span>}
                    </div>
                </div>
                <div className="my_body">
                    <div className="my_common my_member">
                        {my_member.map((item, index) => {
                            return <div key={item.id}>
                                <div className={`my_commonIcon iconfont ${item.icon}`}></div>
                                <div className="my_content" onClick={() => { this.myRecord(item) }}>
                                    <p className="my_contentTitle">{item.title}</p>
                                    {/* 右侧点击的 按钮 */}
                                    <div className="my_contentBtn">
                                        <p>{item.id === 1 ?
                                            // `${user_data.now_loose ? "￥："+user_data.now_loose : 0}` :
                                            (user_data.now_loose ? <span>￥：{user_data.now_loose} </span> : 0) :
                                            (item.id === 3 ? <b>去开通</b> : null)}</p>
                                        <p className="iconfont icon-fanhui1"></p>
                                    </div>
                                </div>
                            </div>
                        })}
                    </div>
                    <div className="my_common my_message">
                        {my_message.map((item, index) => {
                            return <div key={item.id}>
                                <div className={`my_commonIcon iconfont ${item.icon}`}></div>
                                <div className="my_content" onClick={() => { this.myRecord(item) }}>
                                    <p className="my_contentTitle">{item.title}</p>
                                </div>
                            </div>
                        })}
                    </div>
                </div>
                <div style={{height:'9vh'}}></div>
            </div>
        )
    }
    // 点击头像跳转个人信息
    click_loginType() {
        if (this.state.my_loginCode === 0) {
            let path = this.props.location.pathname
            this.props.history.push({
                pathname: '/login',
                state: path,
            })
        } else {
            this.props.history.push('/myMessage')
            // 第二次跳个人信息 
        }
    }
    componentDidMount() {
        // 登录判断    模拟默认登录  --缓存登录信息 减少请求
        let _this = this

        console.log(this.props);

        // 请求用户信息
        if (cookies.get('usertoken')) {
            console.log(this.props.message);
            if (this.props.message) {
                let { message } = this.props
                // console.log(message);
                cookies.set('user_id', message.user_id)
                _this.setState({
                    user_data: message,//数据
                    user_portrait: message.user_portrait,//头像
                    my_loginCode: 1,//login状态
                    my_profileType: message.user_name,//用户名
                })
            } else {
                axios({
                    method: 'post',
                    url: '/api/front_end/userMess',
                    data: {
                        user_account: cookies.get('usertoken'),
                    }
                }).then((res) => {
                    let datas = res.data
                    this.props.setNav(res.data.data)
                    if (datas.code === '01') {
                        cookies.set('user_id', datas.data.user_id)
                        _this.setState({
                            user_data: datas.data,//数据
                            user_portrait: datas.data.user_portrait,//头像
                            my_loginCode: 1,//login状态
                            my_profileType: datas.data.user_name,//用户名
                        })
                    }
                })
            }


        }


    }
    // 右侧点击的 按钮 
    myRecord = (item) => {
        if (this.state.my_loginCode === 0) {
            let path = this.props.location.pathname
            this.props.history.push({
                pathname: '/login',
                state: path,
            })
        } else {
            this.props.history.push({
                pathname: item.path,
                state: item.title
            })
        }
    }
    // componentDidMount() {

    // }

}
export default connect(state => state.Login, fun.loginAction)(My)